<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>争议处理系统 - 处理流程</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#0F52BA',
            secondary: '#3B82F6',
            success: '#10B981',
            warning: '#F59E0B',
            danger: '#EF4444',
            info: '#60A5FA',
            neutral: '#6B7280',
            'neutral-light': '#F3F4F6',
            'neutral-medium': '#D1D5DB'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-thin {
        scrollbar-width: thin;
      }
      .scrollbar-thin::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }
      .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
        border-radius: 2px;
      }
      .transition-bg {
        transition: background-color 0.2s ease-in-out;
      }
      .card-hover {
        @apply hover:shadow-lg transition-all duration-300 hover:-translate-y-1;
      }
      .process-connector {
        @apply absolute top-1/2 h-1 -translate-y-1/2 bg-neutral-medium/30 z-0;
      }
      .process-connector-active {
        @apply bg-primary transition-all duration-700;
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm z-30">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- 左侧Logo和标题 -->
        <div class="flex items-center space-x-4">
          <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary text-white">
            <i class="fa fa-balance-scale text-xl"></i>
          </div>
          <div>
            <h1 class="text-xl font-bold text-primary">争议处理系统</h1>
            <p class="text-xs text-neutral hidden md:block">公正 · 高效 · 透明</p>
          </div>
        </div>
        
        <!-- 右侧用户信息和操作 -->
        <div class="flex items-center space-x-6">
          <button class="relative p-2 text-neutral hover:text-primary transition-colors">
            <i class="fa fa-bell-o text-lg"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
          </button>
          <button class="p-2 text-neutral hover:text-primary transition-colors">
            <i class="fa fa-question-circle-o text-lg"></i>
          </button>
          <div class="flex items-center space-x-3 cursor-pointer group">
            <img src="https://picsum.photos/id/1005/40/40" alt="处理员头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
            <div class="hidden md:block">
              <p class="text-sm font-medium">张明 处理员</p>
              <p class="text-xs text-neutral">在线</p>
            </div>
            <i class="fa fa-angle-down text-neutral group-hover:text-primary transition-colors"></i>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 flex overflow-hidden">
    <!-- 左侧导航 -->
    <aside class="w-64 bg-white border-r border-neutral-medium/30 flex flex-col h-full transition-all duration-300 z-20">
      <nav class="flex-1 overflow-y-auto scrollbar-thin py-4">
        <div class="px-4 mb-2">
          <p class="text-xs font-semibold text-neutral uppercase tracking-wider">主菜单</p>
        </div>
        <ul>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-home w-5 text-center"></i>
              <span>工作台</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-gavel w-5 text-center"></i>
              <span>争议案件</span>
              <span class="ml-auto bg-primary text-white text-xs px-2 py-0.5 rounded-full">12</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 bg-primary/10 text-primary font-medium">
              <i class="fa fa-sitemap w-5 text-center"></i>
              <span>处理流程</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-folder-open-o w-5 text-center"></i>
              <span>证据管理</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-file-text-o w-5 text-center"></i>
              <span>处理结果</span>
            </a>
          </li>
        </ul>
        
        <div class="px-4 mt-6 mb-2">
          <p class="text-xs font-semibold text-neutral uppercase tracking-wider">系统管理</p>
        </div>
        <ul>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-users w-5 text-center"></i>
              <span>用户管理</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-cog w-5 text-center"></i>
              <span>系统设置</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-bar-chart w-5 text-center"></i>
              <span>统计报表</span>
            </a>
          </li>
        </ul>
      </nav>
      
      <!-- 左侧底部 -->
      <div class="p-4 border-t border-neutral-medium/30">
        <div class="bg-primary/5 rounded-lg p-3">
          <div class="flex items-start space-x-3">
            <div class="bg-primary/20 p-2 rounded-full">
              <i class="fa fa-lightbulb-o text-primary"></i>
            </div>
            <div>
              <h4 class="text-sm font-medium">需要帮助？</h4>
              <p class="text-xs text-neutral mt-1">联系客服获取支持</p>
              <button class="text-primary text-xs mt-2 hover:underline">查看帮助中心</button>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 右侧主内容 -->
    <section class="flex-1 flex flex-col overflow-hidden">
      <!-- 页面标题和操作栏 -->
      <div class="bg-white border-b border-neutral-medium/30 p-4 md:p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
          <div>
            <h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold">争议处理流程</h2>
            <p class="text-neutral text-sm mt-1">完整的争议案件处理流程和操作指南</p>
          </div>
          
          <div class="flex items-center space-x-3 mt-4 md:mt-0">
            <button class="flex items-center space-x-2 px-4 py-2 border border-neutral-medium/30 rounded-lg text-neutral hover:bg-neutral-light transition-colors">
              <i class="fa fa-download"></i>
              <span>流程导出</span>
            </button>
            
            <button class="flex items-center space-x-2 px-4 py-2 border border-neutral-medium/30 rounded-lg text-neutral hover:bg-neutral-light transition-colors">
              <i class="fa fa-print"></i>
              <span>打印流程</span>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 流程概览 -->
      <div class="p-4 md:p-6 bg-white border-b border-neutral-medium/30">
        <h3 class="text-lg font-semibold mb-6">流程概览</h3>
        
        <!-- 流程步骤时间线 (桌面版) -->
        <div class="hidden md:block relative">
          <!-- 连接线 -->
          <div class="process-connector left-[10%] right-[10%] process-connector-active" style="width: 80%"></div>
          
          <div class="flex justify-between relative z-10">
            <!-- 步骤1 -->
            <div class="flex flex-col items-center w-1/6">
              <div class="w-10 h-10 rounded-full bg-success flex items-center justify-center text-white mb-3">
                <i class="fa fa-file-text-o"></i>
              </div>
              <h4 class="text-sm font-medium text-center">案件提交</h4>
              <p class="text-xs text-neutral text-center mt-1">0-1个工作日</p>
            </div>
            
            <!-- 步骤2 -->
            <div class="flex flex-col items-center w-1/6">
              <div class="w-10 h-10 rounded-full bg-success flex items-center justify-center text-white mb-3">
                <i class="fa fa-check-circle-o"></i>
              </div>
              <h4 class="text-sm font-medium text-center">材料审核</h4>
              <p class="text-xs text-neutral text-center mt-1">1-2个工作日</p>
            </div>
            
            <!-- 步骤3 -->
            <div class="flex flex-col items-center w-1/6">
              <div class="w-10 h-10 rounded-full bg-success flex items-center justify-center text-white mb-3">
                <i class="fa fa-exchange"></i>
              </div>
              <h4 class="text-sm font-medium text-center">双方调解</h4>
              <p class="text-xs text-neutral text-center mt-1">3-5个工作日</p>
            </div>
            
            <!-- 步骤4 -->
            <div class="flex flex-col items-center w-1/6">
              <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white mb-3">
                <i class="fa fa-gavel"></i>
              </div>
              <h4 class="text-sm font-medium text-center">案件裁决</h4>
              <p class="text-xs text-neutral text-center mt-1">2-3个工作日</p>
            </div>
            
            <!-- 步骤5 -->
            <div class="flex flex-col items-center w-1/6">
              <div class="w-10 h-10 rounded-full bg-neutral-medium flex items-center justify-center text-white mb-3">
                <i class="fa fa-check-square-o"></i>
              </div>
              <h4 class="text-sm font-medium text-center">结果执行</h4>
              <p class="text-xs text-neutral text-center mt-1">根据情况而定</p>
            </div>
          </div>
        </div>
        
        <!-- 流程步骤列表 (移动版) -->
        <div class="md:hidden mt-4 space-y-4">
          <div class="flex items-start">
            <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white mr-3 mt-0.5 flex-shrink-0">
              <i class="fa fa-file-text-o text-sm"></i>
            </div>
            <div>
              <h4 class="text-sm font-medium">1. 案件提交</h4>
              <p class="text-xs text-neutral mt-1">申请人提交争议案件及相关证据材料，0-1个工作日</p>
            </div>
          </div>
          
          <div class="flex items-start">
            <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white mr-3 mt-0.5 flex-shrink-0">
              <i class="fa fa-check-circle-o text-sm"></i>
            </div>
            <div>
              <h4 class="text-sm font-medium">2. 材料审核</h4>
              <p class="text-xs text-neutral mt-1">审核案件材料完整性和有效性，1-2个工作日</p>
            </div>
          </div>
          
          <div class="flex items-start">
            <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white mr-3 mt-0.5 flex-shrink-0">
              <i class="fa fa-exchange text-sm"></i>
            </div>
            <div>
              <h4 class="text-sm font-medium">3. 双方调解</h4>
              <p class="text-xs text-neutral mt-1">组织争议双方进行调解协商，3-5个工作日</p>
            </div>
          </div>
          
          <div class="flex items-start">
            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-3 mt-0.5 flex-shrink-0">
              <i class="fa fa-gavel text-sm"></i>
            </div>
            <div>
              <h4 class="text-sm font-medium">4. 案件裁决</h4>
              <p class="text-xs text-neutral mt-1">根据证据和调解情况作出裁决，2-3个工作日</p>
            </div>
          </div>
          
          <div class="flex items-start">
            <div class="w-8 h-8 rounded-full bg-neutral-medium flex items-center justify-center text-white mr-3 mt-0.5 flex-shrink-0">
              <i class="fa fa-check-square-o text-sm"></i>
            </div>
            <div>
              <h4 class="text-sm font-medium">5. 结果执行</h4>
              <p class="text-xs text-neutral mt-1">监督裁决结果的执行情况，根据情况而定</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 流程详情 -->
      <div class="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-thin">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- 左侧：流程详情导航 -->
          <div class="lg:col-span-1 space-y-4">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden sticky top-4">
              <h3 class="p-4 border-b border-neutral-medium/30 font-semibold">流程详情导航</h3>
              
              <div class="divide-y divide-neutral-medium/30">
                <button class="w-full flex items-center justify-between p-4 text-left hover:bg-neutral-light/50 transition-bg">
                  <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white mr-3 flex-shrink-0">
                      <i class="fa fa-file-text-o text-sm"></i>
                    </div>
                    <span class="text-sm">1. 案件提交</span>
                  </div>
                  <i class="fa fa-angle-down text-neutral"></i>
                </button>
                
                <button class="w-full flex items-center justify-between p-4 text-left hover:bg-neutral-light/50 transition-bg">
                  <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white mr-3 flex-shrink-0">
                      <i class="fa fa-check-circle-o text-sm"></i>
                    </div>
                    <span class="text-sm">2. 材料审核</span>
                  </div>
                  <i class="fa fa-angle-down text-neutral"></i>
                </button>
                
                <button class="w-full flex items-center justify-between p-4 text-left hover:bg-neutral-light/50 transition-bg">
                  <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white mr-3 flex-shrink-0">
                      <i class="fa fa-exchange text-sm"></i>
                    </div>
                    <span class="text-sm">3. 双方调解</span>
                  </div>
                  <i class="fa fa-angle-down text-neutral"></i>
                </button>
                
                <button class="w-full flex items-center justify-between p-4 text-left bg-primary/5 hover:bg-primary/10 transition-bg">
                  <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-3 flex-shrink-0">
                      <i class="fa fa-gavel text-sm"></i>
                    </div>
                    <span class="text-sm font-medium text-primary">4. 案件裁决</span>
                  </div>
                  <i class="fa fa-angle-up text-primary"></i>
                </button>
                
                <button class="w-full flex items-center justify-between p-4 text-left hover:bg-neutral-light/50 transition-bg">
                  <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-neutral-medium flex items-center justify-center text-white mr-3 flex-shrink-0">
                      <i class="fa fa-check-square-o text-sm"></i>
                    </div>
                    <span class="text-sm">5. 结果执行</span>
                  </div>
                  <i class="fa fa-angle-down text-neutral"></i>
                </button>
              </div>
              
              <div class="p-4 border-t border-neutral-medium/30">
                <h4 class="text-sm font-medium mb-3">处理时效标准</h4>
                <ul class="space-y-2 text-sm">
                  <li class="flex items-start">
                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                    <span>简单案件：3-5个工作日</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                    <span>一般案件：7-10个工作日</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                    <span>复杂案件：15-20个工作日</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-exclamation-circle text-warning mt-1 mr-2"></i>
                    <span>特殊情况可申请延期处理</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- 右侧：当前步骤详情 -->
          <div class="lg:col-span-2 space-y-6">
            <!-- 步骤详情卡片 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
              <div class="p-5 border-b border-neutral-medium/30">
                <div class="flex items-center">
                  <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white mr-3">
                    <i class="fa fa-gavel"></i>
                  </div>
                  <div>
                    <h3 class="text-lg font-semibold">4. 案件裁决</h3>
                    <p class="text-sm text-neutral mt-0.5">根据证据和调解情况作出公正裁决</p>
                  </div>
                </div>
              </div>
              
              <div class="p-5">
                <div class="space-y-5">
                  <div>
                    <h4 class="text-sm font-medium mb-2">阶段说明</h4>
                    <p class="text-sm text-neutral leading-relaxed">
                      案件裁决阶段是争议处理的关键环节，处理人员将根据双方提交的证据材料、调解记录和相关法律法规，
                      对争议案件作出公正合理的裁决。裁决结果将以书面形式通知双方当事人，并说明裁决依据和理由。
                    </p>
                  </div>
                  
                  <div>
                    <h4 class="text-sm font-medium mb-2">操作步骤</h4>
                    <ol class="space-y-3 text-sm">
                      <li class="flex">
                        <span class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">1</span>
                        <div>
                          <p class="font-medium">审核全部案件材料</p>
                          <p class="text-neutral mt-1">仔细查阅双方提交的证据、陈述材料和调解记录</p>
                        </div>
                      </li>
                      <li class="flex">
                        <span class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">2</span>
                        <div>
                          <p class="font-medium">确定适用的法律法规</p>
                          <p class="text-neutral mt-1">根据争议类型，查找相关的法律条文和处理标准</p>
                        </div>
                      </li>
                      <li class="flex">
                        <span class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">3</span>
                        <div>
                          <p class="font-medium">作出初步裁决意见</p>
                          <p class="text-neutral mt-1">基于事实和法律，形成初步的裁决方案</p>
                        </div>
                      </li>
                      <li class="flex">
                        <span class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">4</span>
                        <div>
                          <p class="font-medium">审核与复核</p>
                          <p class="text-neutral mt-1">由高级处理人员或审核小组对初步裁决进行复核</p>
                        </div>
                      </li>
                      <li class="flex">
                        <span class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">5</span>
                        <div>
                          <p class="font-medium">生成正式裁决书</p>
                          <p class="text-neutral mt-1">制作规范的裁决文书，明确裁决结果和执行要求</p>
                        </div>
                      </li>
                      <li class="flex">
                        <span class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">6</span>
                        <div>
                          <p class="font-medium">通知双方当事人</p>
                          <p class="text-neutral mt-1">以书面和电子形式将裁决结果通知争议双方</p>
                        </div>
                      </li>
                    </ol>
                  </div>
                  
                  <div>
                    <h4 class="text-sm font-medium mb-2">所需材料</h4>
                    <div class="bg-neutral-light/50 rounded-lg p-3">
                      <ul class="space-y-2 text-sm">
                        <li class="flex items-start">
                          <i class="fa fa-file-text-o text-primary mt-1 mr-2"></i>
                          <span>双方当事人身份证明材料</span>
                        </li>
                        <li class="flex items-start">
                          <i class="fa fa-file-text-o text-primary mt-1 mr-2"></i>
                          <span>争议事件相关证据（合同、照片、录音等）</span>
                        </li>
                        <li class="flex items-start">
                          <i class="fa fa-file-text-o text-primary mt-1 mr-2"></i>
                          <span>调解记录表及双方陈述材料</span>
                        </li>
                        <li class="flex items-start">
                          <i class="fa fa-file-text-o text-primary mt-1 mr-2"></i>
                          <span>相关法律法规条文引用</span>
                        </li>
                        <li class="flex items-start">
                          <i class="fa fa-file-text-o text-primary mt-1 mr-2"></i>
                          <span>处理人员调查笔记（如适用）</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                  
                  <div>
                    <h4 class="text-sm font-medium mb-2">常见问题</h4>
                    <div class="space-y-3">
                      <div class="border border-neutral-medium/30 rounded-lg overflow-hidden">
                        <button class="w-full flex items-center justify-between p-3 text-left hover:bg-neutral-light/50 transition-bg">
                          <span class="text-sm font-medium">当事人对裁决结果不满意怎么办？</span>
                          <i class="fa fa-angle-down text-neutral"></i>
                        </button>
                        <div class="p-3 border-t border-neutral-medium/30 bg-neutral-light/30">
                          <p class="text-sm text-neutral">
                            当事人对裁决结果不满意的，可以在收到裁决书之日起15个工作日内，向本机构提出复核申请，
                            并提供新的证据材料。复核申请将由高级处理团队进行重新审查。
                          </p>
                        </div>
                      </div>
                      
                      <div class="border border-neutral-medium/30 rounded-lg overflow-hidden">
                        <button class="w-full flex items-center justify-between p-3 text-left hover:bg-neutral-light/50 transition-bg">
                          <span class="text-sm font-medium">裁决结果的法律效力如何？</span>
                          <i class="fa fa-angle-down text-neutral"></i>
                        </button>
                      </div>
                      
                      <div class="border border-neutral-medium/30 rounded-lg overflow-hidden">
                        <button class="w-full flex items-center justify-between p-3 text-left hover:bg-neutral-light/50 transition-bg">
                          <span class="text-sm font-medium">裁决书包括哪些内容？</span>
                          <i class="fa fa-angle-down text-neutral"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                  
                  <div class="pt-3 border-t border-neutral-medium/30">
                    <h4 class="text-sm font-medium mb-3">操作工具</h4>
                    <div class="flex flex-wrap gap-3">
                      <button class="flex items-center space-x-2 px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors text-sm">
                        <i class="fa fa-file-text-o"></i>
                        <span>生成裁决书</span>
                      </button>
                      
                      <button class="flex items-center space-x-2 px-4 py-2 border border-primary text-primary hover:bg-primary/5 rounded-lg transition-colors text-sm">
                        <i class="fa fa-history"></i>
                        <span>查看历史案例</span>
                      </button>
                      
                      <button class="flex items-center space-x-2 px-4 py-2 border border-primary text-primary hover:bg-primary/5 rounded-lg transition-colors text-sm">
                        <i class="fa fa-book"></i>
                        <span>法律条文查询</span>
                      </button>
                      
                      <button class="flex items-center space-x-2 px-4 py-2 border border-neutral-medium/30 text-neutral hover:bg-neutral-light rounded-lg transition-colors text-sm">
                        <i class="fa fa-question-circle-o"></i>
                        <span>帮助指南</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 相关案例 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
              <div class="p-5 border-b border-neutral-medium/30 flex justify-between items-center">
                <h3 class="font-semibold">参考案例</h3>
                <button class="text-primary text-sm hover:underline">查看更多</button>
              </div>
              
              <div class="p-5">
                <div class="space-y-4">
                  <div class="border border-neutral-medium/30 rounded-lg p-3 hover:border-primary/50 transition-colors">
                    <div class="flex justify-between items-start">
                      <div>
                        <h4 class="text-sm font-medium">服务质量争议案件（CASE-20230415-028）</h4>
                        <p class="text-xs text-neutral mt-1">裁决日期：2023-04-22</p>
                      </div>
                      <span class="px-2 py-0.5 bg-success/10 text-success text-xs rounded-full">已裁决</span>
                    </div>
                    <p class="text-sm text-neutral mt-2 line-clamp-2">
                      本案涉及服务质量争议，处理人员根据双方提供的服务合同和服务记录，裁定服务提供方未按合同约定提供服务，需退还部分服务费用并进行补偿。
                    </p>
                    <button class="text-primary text-xs mt-2 hover:underline">查看详情</button>
                  </div>
                  
                  <div class="border border-neutral-medium/30 rounded-lg p-3 hover:border-primary/50 transition-colors">
                    <div class="flex justify-between items-start">
                      <div>
                        <h4 class="text-sm font-medium">产品质量争议案件（CASE-20230408-015）</h4>
                        <p class="text-xs text-neutral mt-1">裁决日期：2023-04-15</p>
                      </div>
                      <span class="px-2 py-0.5 bg-success/10 text-success text-xs rounded-full">已裁决</span>
                    </div>
                    <p class="text-sm text-neutral mt-2 line-clamp-2">
                      本案涉及产品质量问题，经专业鉴定确认产品存在质量缺陷，裁定销售方需为申请人办理退货退款，并承担相关鉴定费用。
                    </p>
                    <button class="text-primary text-xs mt-2 hover:underline">查看详情</button>
                  </div>
                  
                  <div class="border border-neutral-medium/30 rounded-lg p-3 hover:border-primary/50 transition-colors">
                    <div class="flex justify-between items-start">
                      <div>
                        <h4 class="text-sm font-medium">合同纠纷案件（CASE-20230325-007）</h4>
                        <p class="text-xs text-neutral mt-1">裁决日期：2023-04-05</p>
                      </div>
                      <span class="px-2 py-0.5 bg-success/10 text-success text-xs rounded-full">已裁决</span>
                    </div>
                    <p class="text-sm text-neutral mt-2 line-clamp-2">
                      本案为合同履行纠纷，根据合同条款和双方履约记录，裁定双方均存在一定违约行为，最终达成部分履行和补偿方案。
                    </p>
                    <button class="text-primary text-xs mt-2 hover:underline">查看详情</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- JavaScript -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 流程步骤导航交互
      const processNavButtons = document.querySelectorAll('.lg\\:col-span-1 button');
      processNavButtons.forEach(button => {
        button.addEventListener('click', function() {
          // 移除所有按钮的活跃状态
          processNavButtons.forEach(btn => {
            btn.classList.remove('bg-primary/5', 'font-medium', 'text-primary');
            btn.classList.add('hover:bg-neutral-light/50');
            
            const icon = btn.querySelector('div .w-8');
            icon.classList.remove('bg-primary');
            icon.classList.add('bg-neutral-medium');
            
            const arrow = btn.querySelector('.fa-angle-up');
            if (arrow) {
              arrow.classList.remove('fa-angle-up', 'text-primary');
              arrow.classList.add('fa-angle-down', 'text-neutral');
            }
          });
          
          // 设置当前按钮为活跃状态
          this.classList.add('bg-primary/5', 'font-medium', 'text-primary');
          this.classList.remove('hover:bg-neutral-light/50');
          
          const icon = this.querySelector('div .w-8');
          icon.classList.remove('bg-neutral-medium');
          icon.classList.add('bg-primary');
          
          const arrow = this.querySelector('.fa-angle-down');
          if (arrow) {
            arrow.classList.remove('fa-angle-down', 'text-neutral');
            arrow.classList.add('fa-angle-up', 'text-primary');
          }
          
          // 在实际应用中，这里会加载对应步骤的详情内容
          const stepName = this.querySelector('span').textContent;
          console.log(`加载步骤详情: ${stepName}`);
        });
      });
      
      // 常见问题折叠面板交互
      const faqButtons = document.querySelectorAll('.border.border-neutral-medium\\/30 button');
      faqButtons.forEach(button => {
        button.addEventListener('click', function() {
          const content = this.nextElementSibling;
          const arrow = this.querySelector('.fa-angle-down');
          
          if (content && content.style.display !== 'block') {
            content.style.display = 'block';
            arrow.classList.remove('fa-angle-down');
            arrow.classList.add('fa-angle-up');
          } else if (content) {
            content.style.display = 'none';
            arrow.classList.remove('fa-angle-up');
            arrow.classList.add('fa-angle-down');
          }
        });
      });
      
      // 工具按钮点击事件
      const toolButtons = document.querySelectorAll('.pt-3 button');
      toolButtons.forEach(button => {
        button.addEventListener('click', function() {
          const toolName = this.querySelector('span').textContent;
          alert(`打开工具: ${toolName}\n在实际应用中，这里会打开相应的工具界面`);
        });
      });
    });
  </script>
</body>
</html>
